<template>
  <div class="add">
    <div class="add_1">
      <h3>欢迎光临范小花_vue开发的收银系统_水果店</h3>
      <div class="liou">榴莲 10元/斤折扣(8折)</div>
      <div class="liou">
        请输入你要买的斤数<input
          v-model.number="arr"
          type="number"
          value="斤数"
        />
      </div>
      <div class="liou"><button @click="fn">结账买单</button></div>
      <div class="liou" v-html="arrt"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: 0,
      arrt: "",
    };
  },
  methods: {
    fn() {
      let zong = this.arr * 10;
      let zs = zong * 0.8;
      let sheng = zong - zs;
      this.arrt = `结账单:总价 ${zong}元,折后价${zs}元,省了${sheng}元`;
    },
  },
};
</script>

<style>
.add {
  position: relative;
  width: 600px;
  height: 400px;
}
.add_1 {
  position: absolute;
  left: 5%;
  right: -300px;
}
.add_1 h3 {
  text-align: center;
}
.liou {
  width: 1000px;
  height: 40px;
  border: 2px solid #333;
  text-align: center;
  line-height: 40px;
}
</style>
